<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

	<style type="text/css">
	.pq-grid td.chart{
        padding: 0px;
    }
    </style>
<script>
    $(function () {
        var fin = function () {
            var r = this.paper,
                x = this.bar.x,
                value = this.bar.value,
                x = (value < 0) ? (x - this.bar.w) : x,
                value = ((value < 0) ? "-" : "") + "$" + $.paramquery.formatCurrency(value);

            this.flag = r.popup(x, this.bar.y, value || "0").insertBefore(this);
        },
        fout = function () {
            this.flag.animate({ opacity: 0 }, 300, function () { this.remove(); });
        },
        formatCurrency = function (ui) {
            return ((ui.cellData < 0) ? "-" : "") + "$" + $.paramquery.formatCurrency(ui.cellData);
        },
        cellsChart = function ($divs, width) {
            $divs.each(function (i, div) {
                var rowData = $(div).data("row"),
                    revenues = parseFloat(rowData.revenues),
                    profits = parseFloat(rowData.profits),
                    r = Raphael(div, width, 50);

                r.hbarchart(40, 20, width - 90, 40, [[profits], [revenues]]).hover(fin, fout);
            });
        }; 
        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
            { rank: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
            { rank: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
            { rank: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
            { rank: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
            { rank: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
            { rank: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3' },
            { rank: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
            { rank: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
            { rank: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
            { rank: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
            { rank: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
            { rank: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
            { rank: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
            { rank: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5' },
            { rank: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
            { rank: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
            { rank: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
            { rank: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
            { rank: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
        ];

        var obj = {
            height: 400,
            resizable: true,
            title: "Dynamic Data Visualization",
            showBottom: false,
            numberCell: { show: false },
            scrollModel: { autoFit: true },
            refresh: function (evt, ui) {                
                var $grid = $(this),
                    width = $grid.pqGrid('getColumn', { dataIndx: 'pqchart' }).width,
                    $divs = $grid.find(".pqchart");

                cellsChart($divs, width);
            },
            refreshCell: function (evt, ui) {                
                if (ui.dataIndx == 'pqchart') {
                    var $grid = $(this),
                        width = $grid.pqGrid('getColumn', { dataIndx: 'pqchart' }).width,
                        $td = $grid.pqGrid('getCell', { rowIndx: ui.rowIndx, dataIndx: 'pqchart' }),
                        $divs = $td.find(".pqchart");

                    cellsChart($divs, width);
                }
            },
            cellSave: function (evt, ui) {
                $(this).pqGrid("refreshCell", { rowIndx: ui.rowIndx, dataIndx: 'pqchart' });
            }
        };
        obj.columnTemplate = { width: 150 };
        obj.colModel = [
            { title: "Company", dataType: "string", dataIndx: "company" },
            { title: "Revenues ($ millions)", dataType: "float", align: "right", dataIndx: "revenues", render: formatCurrency },
            { title: "Profits ($ millions)", dataType: "float", align: "right", dataIndx: "profits", render: formatCurrency },
            { title: "Profits / Revenues",
                cls: 'chart',
                minWidth: 220, width: 400,
                align: "center",
                editable: false,
                dataIndx: 'pqchart',
                render: function (ui) {
                    var rowData = JSON.stringify(ui.rowData);
                    return "<div class='pqchart' data-row='" + rowData + "'></div>";
                },
                sortType: function (rowData1, rowData2) {
                    var val1 = rowData1.profits / rowData1.revenues,
                        val2 = rowData2.profits / rowData2.revenues;
                    return val1 - val2;
                }
            }
        ];
        obj.dataModel = {
            data: data,
            location: "local",
            sorting: "local",
            sortIndx: "profits",
            sortDir: "down"
        };
        $("#grid_json").pqGrid(obj);
    });
        
</script>    
</head>
<body>

<div id="grid_json"></div>

</body>

</html>
